<template>
	<view class="dmm-container">

		<view class="form u-border-bottom">
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="idCardFront" :maxCount="1">
				<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="aspectFit" ></image>
			</u-upload>

			<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="idCardBack" :maxCount="1">
				<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="aspectFit" ></image>
			</u-upload>
		</view>
		
		<view class="title">
			<text class="text text-tip">请输入身份证相关信息</text>
		</view>
		
		<u--form labelPosition="left" :model="authInfo" labelWidth="170rpx" :rules="rules" ref="form">
			<u-form-item label="姓名" prop="agentName" borderBottom>
				<u--input v-model="authInfo.agentName" placeholderStyle="color: #d7d7d7;" placeholder="请输入手机号" border="none"></u--input>
			</u-form-item>
			<u-form-item label="性别" prop="gender" borderBottom>
				<u-radio-group 
				    v-model="authInfo.gender"
				    placement="row">
					<u-radio name="2" label="男" style="margin-right: 60rpx;">男</u-radio>
					<u-radio name="1" label="女">女</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="身份证号" prop="agentIdNo" borderBottom>
				<u--input v-model="authInfo.agentIdNo" placeholderStyle="color: #d7d7d7;" placeholder="请输入验证码" border="none"></u--input>
			</u-form-item>
			<u-form-item label="身份证有效期" prop="dateRange" borderBottom>
				<view class="date">
					<text @click="showStartDate = true" v-if="!authInfo.idNoStart" class="placeholder">请输入开始日期</text>
					<text @click="showStartDate = true" v-else>{{authInfo.idNoStart | dateFormat('format', 'YYYY-MM-DD')}}</text>
					<view class="divider"></view>
					<text @click="showEndDate = true" v-if="!authInfo.idNoEnd" class="placeholder">请输入结束日期</text>
					<text @click="showEndDate = true" v-else>{{authInfo.idNoEnd | dateFormat('format', 'YYYY-MM-DD')}}</text>
				</view>
			</u-form-item>
			
			<u-form-item label="身份证住址" prop="idNoAddress" borderBottom>
				<u--input v-model="authInfo.idNoAddress" placeholderStyle="color: #d7d7d7;" placeholder="请输入验证码" border="none"></u--input>
			</u-form-item>
		</u--form>
		
		<view class="dmm-space" style="margin-bottom: 60rpx;"></view>
		
		<u-button type="primary" :disabled="!couldNext" text="下一步" @click="next"></u-button>

		<compress ref="compress"></compress>
		
		<u-datetime-picker
			:show="showStartDate"
			v-model="authInfo.idNoStart"
			mode="date"
			@confirm="showStartDate = false"
			@cancel="showStartDate = false"
			:formatter="formatter"
		></u-datetime-picker>
		<u-datetime-picker
			:show="showEndDate"
			v-model="authInfo.idNoEnd"
			mode="date"
			@confirm="showEndDate = false"
			@cancel="showEndDate = false"
			:formatter="formatter"
		></u-datetime-picker>
	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/common/utils.js'
	import compress from "@/components/helang-compress/helang-compress"
	import {mapState, mapMutations, mapActions} from 'vuex'

	export default {
		components: {
			compress
		},
		data() {
			return {
				
				rules: {
					agentName: {
						type: 'string',
						required: true,
						message: '姓名必填',
						trigger: ['blur']
					},
					agentIdNo: [
						{
							type: 'string',
							required: true,
							message: '身份证号必填',
							trigger: ['blur']
						},
						// {
						// 	validator: (rule, value, cb) => {
						// 		return uni.$u.test.idCard(value)
						// 	},
						// 	message: '身份证格式不正确',
						// 	trigger: ['blur']
						// }
					],
					idNoAddress: {
						type: 'string',
						required: true,
						message: '身份证住址必填',
						trigger: ['blur']
					},
				},
				
				showStartDate: false,
				showEndDate: false
			};
		},
		computed: {
			...mapState('auth', ['authInfo']),
			...mapState('auth', {
				fileList1: (state) => state.files.idCardFront ? [state.files.idCardFront] : [],
				fileList2: state => state.files.idCardBack ? [state.files.idCardBack] : []
			}),
			
			couldNext: function() {
				return this.fileList1[0] && this.fileList2[0] && this.authInfo.agentName && this.authInfo.agentIdNo && this.authInfo.idNoAddress && this.authInfo.idNoStart && this.authInfo.idNoEnd
			},
		},
		methods: {
			...mapActions('auth', ['filesChange']),
			...mapMutations('auth', ['save']),
			deletePic(event) {
				this.filesChange({name: event.name, file: null})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let file = event.file
				const {name} = event

				// #ifndef H5
				await this.$refs.compress.compress({
					src: file.url,
				}).then(fileUrl => {
					file.url = fileUrl
				})
				// #endif

				this.filesChange({name, file})

			},
			
			next() {
				this.save({field: 'authInfo', payload: this.authInfo})
				uni.navigateTo({
					url: '/pages/auth/auth2'
				})
			},
			
			formatter(type, value) {
				if (type === 'year') {
						return `${value}年`
				}
				if (type === 'month') {
						return `${value}月`
				}
				if (type === 'day') {
						return `${value}日`
				}
				return value
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
	.dmm-space {
		background-color: $u-bg-color;
	}
	.dmm-container {
		margin-top: 20rpx;
		background-color: #fff;
		
		.u-form {

			.u-form-item {
				padding: 0;
				padding-left: 30rpx;
				/deep/ .u-form-item__body__left {
					width: 188rpx !important;
				}
			}
			.u-input {

			}
			
			.date {
				display: flex;
				flex-direction: row;
				align-items: center;
				
				.divider {
					height: 2rpx;
					width: 42rpx;
					margin: 0 30rpx;
					background-color: $u-border-color;
				}
				
				.placeholder {
					color: $u-placeholder-color;
					
				}
			}
		}
		
		.title {
			background-color: $u-bg-color;
			height: 68rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 30rpx;
			text {
				font-size: $uni-font-size-sm;
			}
			
		}
		
		.form {
			display: flex;
			padding: 40rpx 0;
			justify-content: space-between;
			margin: 0 30rpx 40rpx;
			.u-upload {
				width: 335rpx;
				
				/deep/ .u-upload__wrap__preview {
					margin: 0;
				}
				/deep/ image {
					border-radius: $uni-border-radius-lg;
					width: 335rpx !important;
					height: 208rpx !important;
				}
			}
		}
		
		.u-button {
			margin: auto;
			width: 660rpx !important;
		}
	}
</style>
